<template>
  <div class="bottom-intro">
    <p class="block-title">黄金屋</p>
    <p class="intro">
      致力于打造黄金珠宝领域的垂直电商平台，成就中国黄金珠宝线上第一品牌,
      一个链接超10亿人流量池的联合创富平台！
    </p>
    <div class="lines">
      <div class="line">
        <svg
          t="1607393750304"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3768"
          width="128"
          height="128"
        >
          <path
            d="M512.768 1024H512a65.536 65.536 0 0 1-47.283-20.224c-9.677-10.112-97.434-102.656-184.73-219.904C162.15 625.664 102.4 499.456 102.4 408.909 102.4 183.424 286.157 0 512 0s409.6 183.424 409.6 408.883c0 54.784-21.12 121.907-62.746 199.45-40.166 74.777-100.556 161.638-179.532 258.201l-0.64 0.768-117.53 134.4A64.589 64.589 0 0 1 512.768 1024zM512 600.294c105.728 0 191.744-85.862 191.744-191.41S617.728 217.471 512 217.471s-191.744 85.862-191.744 191.411S406.272 600.294 512 600.294z"
            fill="#a58453"
            p-id="3769"
          ></path>
        </svg>
        <p class="text">地址：{{info.address}}</p>
      </div>
      <div class="line">
        <svg
          t="1607393823972"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4618"
          width="128"
          height="128"
        >
          <path
            d="M921.6 128H102.4C45.85 128 0 173.85 0 230.4v563.2C0 850.15 45.85 896 102.4 896h819.2c56.56 0 102.4-45.85 102.4-102.4V230.4c0-56.55-45.84-102.4-102.4-102.4z m-7.24 272.26l-376.3 222.65c-8 4.75-17.05 7.15-26.05 7.15s-18.05-2.4-26.05-7.15l-376.3-222.65c-24.35-14.4-32.4-45.8-18-70.1 14.4-24.35 45.85-32.4 70.1-18l350.25 207.2 350.25-207.2c24.3-14.4 55.75-6.35 70.1 18 14.4 24.3 6.35 55.7-18 70.1z"
            p-id="4619"
            fill="#a58453"
          ></path>
        </svg>
        <p class="text">邮箱：{{info.email}}</p>
      </div>
      <div class="line">
        <svg
          t="1607393863425"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5414"
          width="128"
          height="128"
        >
          <path
            d="M614.22 699.934c1.746-1.084 20.9-13.07 26.503-16.444 10.36-6.265 18.914-10.963 27.467-14.818 60.115-27.347 113.122-8.011 183.236 73.909 43.37 50.718 56.2 95.714 39.454 135.77-12.469 29.937-36.503 50.598-79.27 76.137-2.77 1.627-27.407 15.963-33.731 19.878-99.57 61.44-327.8-79.21-491.942-319.548C121.374 413.877 78.787 156.973 179.682 94.63l13.312-8.433L207.45 76.8c51.02-33.009 83.667-46.2 122.398-39.635 38.672 6.626 71.56 35.238 99.389 87.341 58.669 110.23 45.718 162.515-29.757 210.04-5.42 3.494-24.696 15.12-26.503 16.264-18.492 11.445 12.83 88.125 85.655 194.741C532.36 653.372 593.98 712.343 614.159 699.934z"
            fill="#a58453"
            p-id="5415"
          ></path>
        </svg>
        <a :href="`tel:${info.tel}`"><p class="text">电话：{{info.tel}}</p></a>
      </div>
      <div class="line">
        <svg
          t="1607393890993"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6215"
          width="128"
          height="128"
        >
          <path
            d="M967.221106 696.496549C960.047076 597.702155 893.755767 514.9352 855.435713 472.126186 860.754677 459.671925 873.69864 387.583016 823.715595 338.395395 823.795831 337.215402 823.795831 336.045091 823.795831 334.901064 823.795831 140.863321 685.685367 1.199361 512.390891 0.564405 339.068748 1.200744 200.963819 140.864704 200.963819 334.901064 200.963819 336.045091 200.947219 337.215402 201.03022 338.395395 151.047175 387.583016 164.014657 459.671925 169.310104 472.126186 131.014947 514.9352 64.71534 597.702155 57.527476 696.496549 56.231281 722.467482 60.247133 760.297836 72.933796 777.111017 88.392684 797.613585 130.824045 772.994179 161.167731 707.489997 169.61029 737.836453 189.096097 784.163311 233.187472 842.965185 159.398432 859.804655 138.350829 932.583851 163.174966 972.366103 180.682589 1000.399605 220.766412 1023.455824 289.84516 1023.455824 412.749888 1023.455824 467.026838 990.424297 491.250603 967.423408 496.187763 962.406019 503.309227 959.986546 512.390891 959.967181 521.442122 959.986546 528.580185 962.406019 533.500746 967.423408 557.727278 990.424297 612.015295 1023.455824 734.892356 1023.455824 803.996001 1023.455824 844.052161 1000.399605 861.559785 972.366103 886.390835 932.583851 865.347385 859.803273 791.577708 842.965185 835.670471 784.161929 855.160428 737.836453 863.597449 707.489997 893.94944 772.994179 936.372497 797.612197 951.845217 777.111017 964.518047 760.297836 968.539438 722.467482 967.221106 696.496549L967.221106 696.496549Z"
            p-id="6216"
            fill="#a58453"
          ></path>
        </svg>
        <p class="text">QQ：{{info.qq}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object
    }
  },
};
</script>

<style lang="scss" scoped>
.bottom-intro {
  font-size: 18px;

  @media screen and (max-width: 575px) {
    font-size: 12px;
  }
}

.block-title {
  font-family: Segoe UI;
  font-weight: bold;
  margin: 0 0 64px 0;
  color: #fff;
  position: relative;
  font-size: var(--block-title-size);

  @media screen and (max-width: 575px) {
    margin: 0 0 24px 0;
  }

  &::after {
    content: "";
    width: 158px;
    height: 7px;
    background: #a58453;
    opacity: 1;
    position: absolute;
    left: 0;
    bottom: -16px;

    @media screen and (max-width: 575px) {
      width: 110px;
    }
  }
}

.intro {
  color: rgba(255, 255, 255, 0.5);
}

.line {
  display: flex;
  align-items: center;
  margin: 24px 0;

  @media screen and (max-width: 575px) {
    margin: 12px 0;
  }
}

svg {
  width: 24px;
  height: 24px;
  margin: 0 8px 0 0;

  @media screen and (max-width: 575px) {
    width: 14px;
    height: 14px;
  }
}

.text {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
</style>